import React, { memo, useCallback, useEffect } from 'react'
import { useSelector, shallowEqual, useDispatch } from 'react-redux'

import { getRcmCoverAction } from '../../store/actionCreators'

import { useHistory } from 'react-router-dom'

import WYThemeHeaderRCM from "@/components/theme-header-rcm"
import WYThemeCover from "@/components/theme-cover"

import { RecommendWrapper } from './style'

export default memo(function HotRecommend() {
  const state = useSelector(state => ({
    coverList: state.getIn(["recommend", "coverList"])
  }), shallowEqual)

  const dispatch = useDispatch()
  const history = useHistory()

  useEffect(() => {
    dispatch(getRcmCoverAction({
      limit: 8
    }))
  }, [dispatch])

  const keywordClick = useCallback((keyword) => {
    history.push({
      pathname: "/discover/songs",
      cat: keyword
    })
  }, [history])

  return (
    <RecommendWrapper>
      <WYThemeHeaderRCM
        title="热门推荐"
        keywords={["话语", "流行", "民谣", "摇滚", "电子"]}
        moreLink="/discover/songs"
        keywordClick={keywordClick}
      ></WYThemeHeaderRCM>
      <div className="recommend-list">
        {
          state.coverList.map(item => {
            return (
              <WYThemeCover info={item} key={item.id}/>
            )
          })
        }
      </div>
    </RecommendWrapper>
  )
})